<template>
  <div class="het-panel">
    <HETTable ref="hisTable" :config="hisConfig"></HETTable>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mAxios, encodeURL } from '~/utils/axios/axios.js'
import { useRouter } from 'vue-router'
import moment from 'moment'
const router = useRouter()
const hisTable = ref()
const hisConfig = ref({
  module: '',
  selectApi: params =>
    mAxios.get('vuln/scan/history/list', {
      params: encodeURL(params)
    }),
  deleteApi: params => mAxios.delete('vuln/scan/history', { data: params }),
  search: {
    form: {},
    config: [
      {
        label: '',
        prop: 'timeRange',
        type: 'date-picker',
        setting: {
          type: 'datetimerange',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间'
        }
      },
      {
        label: '',
        prop: 'taskName',
        type: 'input',
        setting: { placeholder: '任务名称' }
      },
      {
        label: '',
        prop: 'status',
        type: 'select',
        style: { width: '280px' },
        setting: { placeholder: '扫描状态' },
        options: [
          { label: '待扫描', value: '等待中' },
          { label: '扫描中', value: '扫描中' },
          { label: '扫描完成', value: '扫描完成' },
          { label: '已停止', value: '已停止' }
        ]
      }
    ]
  },
  columns: [
    // { type: 'selection', width: 34 },
    {
      label: '任务名',
      prop: 'taskName'
    },
    {
      label: '执行方式',
      prop: 'excuteWay',
      formatter: row => {
        let week = ''
        switch (row.dayOfWeek) {
          case 'MONDAY':
            week = '周一'
            break
          case 'TUESDAY':
            week = '周二'
            break
          case 'WEDNESDAY':
            week = '周三'
            break
          case 'THURSDAY':
            week = '周四'
            break
          case 'FRIDAY':
            week = '周五'
            break
          case 'SATURDAY':
            week = '周六'
            break
          case 'SUNDAY':
            week = '周日'
            break
        }
        return row.excuteWay + week + (row.excuteTime ? moment(row.excuteTime).format('HH:mm:ss') : '') + '执行'
      }
    },
    {
      label: '发现漏洞数',
      prop: 'vulnNum'
    },
    {
      label: '状态',
      prop: 'status'
    },
    {
      label: '开始扫描时间',
      prop: 'startTime'
    },
    {
      label: '完成扫描时间',
      prop: 'endTime'
    },
    {
      label: '操作',
      custom: {
        type: 'button',
        operatBtns: [
          {
            name: '查看结果',
            handleClick: row => {
              router.push({
                path: '/scanresult',
                query: row
              })
            }
          },
          {
            name: '停止任务',
            handleClick: row => {
              ElMessageBox.confirm('确定要停止该扫描任务？', '停止扫描', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                center: true,
                closeOnClickModal: false,
                type: 'warning'
              }).then(() => {
                mAxios.put('vuln/scan/stop', row).then(res => {
                  res.data.succeed ? ElMessage.success('停止成功') : ElMessage.error('操作失败')
                  hisTable.value.getTableData()
                })
              })
            },
            disabledFn: row => {
              if (row.excuteWay == '单次') {
                if (!(row.status == '扫描中' || row.status == '等待中')) {
                  return true
                }
              } else {
                return false
              }
            }
          },
          {
            name: '删除',
            type: 'delete',
            disabledFn: row => {
              return row.status == '扫描中'
            }
          }
        ]
      }
    }
  ],
  controlBtns: [
    // {
    //   name: '批量删除',
    //   icon: 'Delete',
    //   type: 'delete',
    //   disabled: data => {
    //     return data.length == 0
    //   }
    // }
  ]
})
</script>
